<template>
    <!-- 对账单项目 -->
    <div class="view_statement_account">
        <card title="商家对账单">
            <template #actions>
                <el-date-picker
                    class="w-36"
                    v-model="queryAccountDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择创建日期"
                />
                <el-select class="w-28" v-model="queryAccountReviewStatus" placeholder="审核状态" clearable>
                    <el-option
                        v-for="(val, key) in accountReviewStatus"
                        :key="val.text"
                        :value="key"
                        :label="val.text"
                    />
                </el-select>
                <el-select class="w-28" v-model="queryAccountType" placeholder="订单类型" clearable>
                    <el-option v-for="(val, key) in accountTypes" :key="val" :value="key" :label="val" />
                </el-select>
                <el-select class="w-28" v-model="queryByWhat">
                    <el-option v-for="(val, key) in queryBySomething" :key="key" :value="key" :label="val" />
                </el-select>
                <el-input
                    class="w-48"
                    prefix-icon="el-icon-search"
                    v-model="queryString"
                    :placeholder="placeholder"
                    clearable
                />
            </template>
            <template #default>
                <el-table :data="tableData">
                    <el-table-column type="index" label="#" align="center" />
                    <el-table-column prop="nickName" label="卖家账号" />
                    <el-table-column prop="checkingSn" label="对账单号" />
                    <el-table-column prop="lockKey" label="金额" />
                    <el-table-column prop="userName" label="审核员" />
                    <el-table-column label="审核状态">
                        <template #default="{ row: { auditStatus } }">
                            <el-tag :type="accountReviewStatus[auditStatus].tagType">
                                {{ accountReviewStatus[auditStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="startDate" label="起始日期" />
                    <el-table-column prop="endDate" label="截止日期" />
                    <el-table-column prop="orderSn" label="卖家订单单号" />
                    <el-table-column label="订单类型">
                        <template #default="{ row: { orderType } }">
                            {{ accountTypes[orderType] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="receiveTime" label="确认收货时间" />
                    <el-table-column prop="createTime" label="创建时间" />
                </el-table>
            </template>
            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';

export default {
    data() {
        return {
            tableData: [],

            queryByWhat: 'checkingSn',
            queryAccountReviewStatus: '',
            queryAccountType: '',
            queryAccountDate: '',
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/ums/findCheckingAccount',
            paginable: true,
            params: {
                queryString: 'queryByWhat',
                queryAccountType: 'orderType',
                queryAccountReviewStatus: 'auditStatus',
                queryAccountDate: 'createTime',
            },
        }),
    ],

    computed: {
        // 文本框占位符
        placeholder() {
            return `按${this.queryBySomething[this.queryByWhat]}查询`;
        },

        // 按某物查询
        queryBySomething() {
            return {
                checkingSn: '对账单号',
                sellerName: '卖家账号',
            };
        },

        // 账目审核状态
        accountReviewStatus() {
            return {
                1: { tagType: 'success', text: '已确认' },
                2: { text: '待确认' },
                3: { tagType: 'warning', text: '待审核' },
            };
        },

        // 账目类型
        accountTypes() {
            return {
                1: '销售',
                2: '退单',
            };
        },
    },

    watch: {
        queryAccountReviewStatus: 'query',
        queryAccountType: 'query',
        queryAccountDate: 'query',
    },
};
</script>